<template>
  <div class="clearfix" >
    <a-card class="custom-card" style="height: calc(100vh - 130px); padding: 5px">
      <!-- 树控件区域-->
      <template>
        <a-dropdown :trigger="[dropTrigger]" @visibleChange="dropStatus">
          <lone-asnc-tree ref="loneAsncTree"
                          :url="url"
                          :initDataFatherFunction="initDataFatherFunction"
                          :searchKeyWordFunction="searchKeyWordFunction"
                          :addFatherFunction="addFatherFunction"
                          :editFatherFunction="editFatherFunction"
                          :dropTrigger="dropTrigger"
                          :buttonTitle="buttonTitle"
                          :permissionData="permissionData"
                          :permissionKeys="permissionKeys"
                          :placeholder="placeholder"
                          :icon="icon"
                          :selectedKeyData="selectedKeyData"
                          :checkable="checkable"
                          :multiple="multiple"
                          :db-click="`Y`"
                          :rightTitle="rightTitle"
                          :columns="columns"
                          @rightHandle="rightHandle"
                          @dropStatus="dropStatus"
                          @handleTreeAdd="handleTreeAdd"
                          @handleTreeEdit="handleTreeEdit"
                          @handleTreeDelete="handleTreeDelete"
                          @closeDrop="closeDrop"
                          @onSelect="onSelect"
                          @onDbSelect="onDbSelect"
          />
          <!--新增右键点击事件,增加添加编辑删除功能-->
        </a-dropdown>
      </template>
    <mms-material-classify-modal ref="modalForm" @ok="modalFormOk" @close="onClose"></mms-material-classify-modal>
    </a-card>
  </div>
</template>
<script>
import LoneAsncTree from './form/ClassifyLoneAsncTree'
import ACol from 'ant-design-vue/es/grid/Col'
import { getAction} from '@lone/lone-vue/src/api/manage'
import MmsMaterialClassifyModal from './modules/MmsMaterialClassifyModal'
import ARow from 'ant-design-vue/es/grid/Row'
import { LoneAsncTreeMixin } from '@/mixins/LoneAsncTreeMixin'
export default {
  mixins: [LoneAsncTreeMixin],
  components: {
    ARow,
    ACol,
    LoneAsncTree,
    MmsMaterialClassifyModal
  },
  data () {
    return {
      buttonName:'物资分类',
      loading:false,
      dropTrigger: 'contextmenu',
      rightClickSelectedKey:'',
      treeLink: '',
      url: {
        delete: '/base/mmsMaterialClassify/delete',
        list: "/base/mmsMaterialClassify/treeList",
        navList: '/base/mmsMaterialClassify/queryMmsMaterialClassifyTreeList',
        search: '/base/mmsMaterialClassify/searchBy',
        queryById:'/base/mmsMaterialClassify/queryById',
        importExcelUrl: "/base/mmsMaterialClassify/importExcel",
      },
      rightTitle: '物资分类',
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title:'物资分类编码',
          align:"center",
          dataIndex: 'classifyCode'
        },
        {
          title:'物资分类名称',
          align:"center",
          dataIndex: 'classifyName'
        },
        {
          title:'父物资分类编码',
          align:"center",
          dataIndex: 'parentId'
        },
        {
          title:'描述',
          align:"center",
          dataIndex: 'remarks'
        },
        {
          title:'状态',
          align:"center",
          dataIndex: 'delFlag'
        }
      ],
      //控制按钮是否显示  增删改，0 1 2 默认开启，
      permissionKeys: [
        {
          addKey: '0',
          editKey: '1',
          deleteKey: '2',
          refreshKey: '3',
        }
      ],
      //按钮权限控制
      permissionData: [
        {
          dataPermissionAdd: '',
          dataPermissionEdit: '',
          dataPermissionDelete: '',
          dataPermissionRefresh: '',
        }
      ],
      //按钮内容
      buttonTitle:'物资分类',
      placeholder:'请输入物资分类名称',
      onSelectKey:'no',
      //树形控件定制图标
      icon: [
        {
          //叶子节点
          slot :'smile',//图标分模块化
          linkType : 'pic-right',//图标类型
          style :'color:green' //图标显示颜色
        },{
          //非叶子结点
          slot :'meh',//图标分模块化
          linkType : 'pic-left',//图标类型
          style :'color:red' //图标显示颜色
        }
      ],
      multiple:false,
      checkable:false,
      selectedKeyData:'yes',
      //保存选中的Key
      selectKeys:''
    }
  },
  created() {
    let that = this
    if(that.$route.params.mmsMaterialClassify){
      that.initData()
    }
  },
  watch:{
    lockFlag(val){
      this.permissionKeys = []
      if(val ==1){
        let json = {
          addKey: '0',
          editKey: '1',
          deleteKey: '2',
          refreshKey: '3',
        }
        this.permissionKeys.push(json)
      }else{
        let json = {
          addKey: '6',
          editKey: '6',
          deleteKey: '6',
          refreshKey: '3',
        }
        this.permissionKeys.push(json)
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },

  },
  methods: {
    searchKeyWordFunction(value){
      if (value) {
        getAction(this.url.search,{ keyWord:value }).then((res) => {
          if (res.success) {
            this.$refs.loneAsncTree.treeSource = res.result
            this.$refs.loneAsncTree.loading = false
          }
        })
      }else{
        this.initData()
      }
    },
    initDataFatherFunction (key = '', first = true, url = this.url.navList) {
      let that = this
        getAction(url,{ key }).then((res) => {
          if (res.success) {
            that.$refs.loneAsncTree.treeSource = res.result
            that.$refs.loneAsncTree.loading = false
          }
        })
    },
    addFatherFunction(num){
      let selectKey = this.$refs.loneAsncTree.selectedKeys[0]
      if(num == 1){
        if(selectKey == undefined || selectKey == ''){
          this.$message.warning('请先选中一条记录!');
          return false;
        }
        //temp 为当前传入的节点
        this.$refs.modalForm.add(selectKey);
      }else{
        //temp 为当前传入的节点
        this.$refs.modalForm.add(null);
      }
      this.$refs.modalForm.title = "新增";

    },
    editFatherFunction(){
      let selectedKey = this.$refs.loneAsncTree.selectedKeys[0];
      if(selectedKey == undefined || selectedKey == ''){
        this.$message.warning('请先选中一条记录!');
        return false;
      }
      this.$refs.modalForm.edit(selectedKey);
      this.$refs.modalForm.title = "编辑";
    },
    modalFormOk(){
      this.initData();
    },
    onClose(){
      this.selectKeys = ''
    },
    onSelect(record){
      if(record.key != undefined){
        this.selectKeys = record.key;
        this.$refs.loneAsncTree.queryParam.treeCode = record.key;
        this.$refs.loneAsncTree.loadData(1);
      }
    },
    onDbSelect(selectKey){

    },
  },
}
</script>
<style scoped lang="scss">
.card-scroll {
  height: calc(100vh - 140px);
  overflow: hidden;
  /deep/.ant-card-body {
    height: calc(100vh - 140px);
    overflow: hidden;
    .left-wrap {
      position: relative;
      height: calc(100vh - 188px) !important;
      padding-top: 52px;
      overflow: hidden;
      .btn-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 52px;
        z-index: 9999;
      }
      .tree-wrap {
        height: calc(100vh - 240px) !important;
        overflow: auto;
      }
    }
  }
}

.area-title {
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 10px;
  &:before {
    content: '';
    width: 4px;
    height: 14px;
    background-color: #1890FF;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.ant-card-body{
  .clearfix{
    .custom-card{
      /deep/ .ant-card-body{
        padding: 0 4px!important;
      }
    }
  }
}
</style>